<template>
  <div id="panel">
    <el-card class="queryForm">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        :label-position="'right'"
      >
        <!-- 改造：年选择器 + 季度下拉框 -->
        <el-form-item label="选择年/季度：" prop="quarter">
          <el-row :gutter="10" class="year-quarter-container">
            <!-- 年份选择器（type=year） -->
            <el-col :span="10">
              <el-date-picker
                v-model="queryParams.year"
                type="year"
                format="yyyy年"
                value-format="yyyy"
                placeholder="选择年份"
                class="year-picker"
                @change="handleYearOrQuarterChange"
              ></el-date-picker>
            </el-col>
            <!-- 季度下拉框 -->
            <el-col :span="12">
              <el-select
                v-model="queryParams.quarter"
                placeholder="选择季度"
                class="quarter-select"
                @change="handleYearOrQuarterChange"
              >
                <el-option label="第一季度（1-3月）" value="1"></el-option>
                <el-option label="第二季度（4-6月）" value="2"></el-option>
                <el-option label="第三季度（7-9月）" value="3"></el-option>
                <el-option label="第四季度（10-12月）" value="4"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            style="padding: 10px"
            >查询</el-button
          >
          <!-- <el-button @click="resetQuery" style="padding: 10px">
            <i class="iconfont icon-saoba"></i>
            重置
          </el-button> -->
          <el-button type="primary" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="pageContent">
      <el-table
        id="selectTable"
        :data="tableList.rows"
        stripe
        :height="tableHeight"
        v-loading="loading"
        :span-method="objectSpanMethod"
        border
        :cell-style="cellStyle"
      >
        <el-table-column
          v-for="(column, index) in columns"
          :key="index"
          :prop="column.prop"
          :label="column.label"
          align="center"
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import tableToExcel from "@/utils/tableToExcel";
import getTime from "@/utils/getTime.js";
import { getWeekReport } from "@/api/drinkingwatersource.js";

export default {
  name: "HydrologicStation",
  props: ["selTreeId"],
  components: {},
  computed: {},
  data() {
    return {
      tableHeight: window.innerHeight - 350,
      options: [],
      basinOptions: [],
      regionList: [],
      lakeList: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        year: "", // 新增：选中的年份（格式：yyyy）
        quarter: "", // 新增：选中的季度（1-4）
      },
      tableList: {
        total: 0,
        rows: [],
      },
      columns: [],
      requestTimer: null, // 延迟请求定时器
      quarterRange: {
        start: "", // 季度开始时间（yyyy-mm-dd，如2025-01-01）
        end: "", // 季度结束时间（yyyy-mm-dd，如2025-03-31）
      },
    };
  },
  watch: {
    selTreeId: {
      handler(newVal) {
        if (newVal) {
          this.selTreeId = newVal;
          this.getList(); // 有id时立即请求
          if (this.requestTimer) clearTimeout(this.requestTimer);
        } else {
          this.delayRequest(); // 无id时延迟重试
        }
      },
      deep: true,
    },
  },
  created() {
    // 初始化：默认选中当前年+当前季度
    this.setCurrentYearAndQuarter();
  },
  mounted() {
    this.pageInit();
  },
  methods: {
    /**
     * 核心：单元格合并方法（实现整体水质、超标项横向合并）
     * @param {Object} param0 - 表格单元格参数（row：当前行数据，columnIndex：列索引）
     * @returns {Object} 合并配置（rowspan：行合并数，colspan：列合并数）
     */
    objectSpanMethod({ row, columnIndex }) {
      // 总列数 = 动态表头长度（确保合并范围适配表头）
      const totalColumnCount = this.columns.length;
      // 合并列数 = 总列数 - 1（排除第1列，从第2列合并到最后一列）
      const mergeColumnCount = totalColumnCount - 1;

      // 1. 处理“整体水质”行
      if (row?.column1 === "整体水质") {
        if (columnIndex === 0) {
          // 第1列：显示“整体水质”文本，不合并
          return { rowspan: 1, colspan: 1 };
        } else if (columnIndex === 1) {
          // 第2列：作为合并起始列，合并后续所有列
          return { rowspan: 1, colspan: mergeColumnCount };
        } else {
          // 第3列及以后：隐藏（被合并覆盖，避免重复显示）
          return { rowspan: 1, colspan: 0 };
        }
      }

      // 2. 处理“超标项”行
      if (row?.column1 === "超标项") {
        if (columnIndex === 0) {
          // 第1列：显示“超标项”文本，不合并
          return { rowspan: 1, colspan: 1 };
        } else if (columnIndex === 1) {
          // 第2列：作为合并起始列，合并后续所有列
          return { rowspan: 1, colspan: mergeColumnCount };
        } else {
          // 第3列及以后：隐藏
          return { rowspan: 1, colspan: 0 };
        }
      }

      // 3. 其他行：不合并
      return { rowspan: 1, colspan: 1 };
    },

    /**
     * 单元格样式（优化合并行视觉效果）
     * @param {Object} param0 - 单元格参数
     * @returns {Object} 样式配置
     */
    cellStyle({ row }) {
      // 合并行（整体水质/超标项）添加背景色，突出显示
      if (row?.column1 === "整体水质" || row?.column1 === "超标项") {
        return {
          backgroundColor: "#f0f7ff", // 淡蓝色背景
          fontWeight: "500", // 字体加粗
        };
      }
      return {};
    },
    // 延迟请求方法（原逻辑保留）
    delayRequest() {
      if (this.requestTimer) clearTimeout(this.requestTimer);
      this.requestTimer = setTimeout(() => {
        if (this.itemId) {
          this.getList();
        } else {
          this.delayRequest();
        }
      }, 1000);
    },

    // 初始化：设置当前年和当前季度
    setCurrentYearAndQuarter() {
      const today = new Date();
      const currentYear = today.getFullYear().toString(); // 当前年（如"2025"）
      const currentQuarter = Math.ceil((today.getMonth() + 1) / 3).toString(); // 当前季度（1-4）

      // 赋值给查询参数
      this.queryParams.year = currentYear;
      this.queryParams.quarter = currentQuarter;

      // 计算当前季度的开始/结束日期
      this.calculateQuarterRange(currentYear, currentQuarter);
    },

    // 处理年份/季度变化：重新计算季度范围
    handleYearOrQuarterChange() {
      const { year, quarter } = this.queryParams;
      if (!year || !quarter) return; // 年份/季度未选则不处理
      this.calculateQuarterRange(year, quarter);
      this.$emit("quarter-selected", this.quarterRange); // 向父组件传递季度范围（可选）
    },

    // 核心：计算季度的开始和结束日期
    calculateQuarterRange(year, quarter) {
      const yearNum = Number(year);
      const quarterNum = Number(quarter);
      let startMonth, endMonth, endDay;

      // 根据季度确定开始/结束月份
      switch (quarterNum) {
        case 1:
          startMonth = 0; // 1月（Date对象月份从0开始）
          endMonth = 2; // 3月
          endDay = 31; // 1季度结束日：3月31日
          break;
        case 2:
          startMonth = 3; // 4月
          endMonth = 5; // 6月
          endDay = 30; // 2季度结束日：6月30日
          break;
        case 3:
          startMonth = 6; // 7月
          endMonth = 8; // 9月
          endDay = 30; // 3季度结束日：9月30日
          break;
        case 4:
          startMonth = 9; // 10月
          endMonth = 11; // 12月
          endDay = 31; // 4季度结束日：12月31日
          break;
        default:
          startMonth = 0;
          endMonth = 2;
          endDay = 31;
      }

      // 构造开始/结束日期对象
      const startDate = new Date(yearNum, startMonth, 1); // 季度第一天（如2025-01-01）
      const endDate = new Date(yearNum, endMonth, endDay); // 季度最后一天（如2025-03-31）

      // 格式化为yyyy-mm-dd并保存
      this.quarterRange.start = this.formatDate(startDate);
      this.quarterRange.end = this.formatDate(endDate);
    },

    // 日期格式化（yyyy-mm-dd，原逻辑保留）
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },

    // 页面初始化（原逻辑保留）
    pageInit() {
      this.getList();
    },

    // 分页方法（原逻辑保留）
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },

    // 搜索（原逻辑保留）
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    // 重置：恢复为当前年+当前季度
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      // 重置后恢复默认值
      this.setCurrentYearAndQuarter();
    },

    // 导出（原逻辑保留）
    handleExport() {
      tableToExcel.getExcel("#selectTable", "监测数据季报表");
    },

    // 获取表格数据：请求参数改用季度范围
    getList() {
      console.log(">>>当前季度范围", this.quarterRange);
      console.log(">>>treeid", this.selTreeId);

      // 构造请求参数：使用季度的start和end（替换原月份范围）
      const query = {
        startTime: this.quarterRange.start, // 季度开始时间
        endTime: this.quarterRange.end, // 季度结束时间
        id: this.selTreeId,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      };

      this.loading = true;
      getWeekReport(query).then((res) => {
        this.tableList.total = res.total;
        this.tableList.rows = res.data.tableData;
        this.columns = res.data.tableOp;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

img {
  vertical-align: middle;
}

#panel {
  padding-bottom: 0px;
  min-height: calc(100% - 20px);
  margin: 0;

  // 分页样式（原逻辑保留）
  .pagination-self {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
    position: relative;

    .el-pagination__total {
      position: absolute;
      left: 5px;
      color: #409eff;
      font-weight: 600;
      font-size: 15px;
    }
  }

  .refresh-button {
    .el-icon-refresh {
      font-size: 18px;
      line-height: 28px;
    }
  }

  .el-card {
    margin: 10px;
  }

  .queryForm .el-card__body {
    padding: 0 20px !important;
  }

  .queryForm {
    .el-form-item {
      margin: 10px 0 10px 10px;
    }

    .el-form-item:first-child {
      margin-left: 0 !important;
    }

    .el-form-item__label {
      padding-right: 5px;
      color: #555;
    }

    // 年+季度组合容器样式
    .year-quarter-container {
      align-items: center; // 垂直居中对齐
    }

    // 年份选择器宽度
    .year-picker {
      width: 100%;
    }

    // 季度下拉框宽度
    .quarter-select {
      width: 100%;
    }

    .times {
      .el-form-item__content {
        width: 250px;
      }
    }

    .el-form-item__content {
      min-width: 300px; // 适配年+季度组合宽度
    }

    .searchBtnBox {
      display: inline-block;
      margin: 20px 0 20px 20px;
    }
  }

  .pageContent {
    .tabs-list {
      padding-top: 20px;
    }

    .el-tabs__header {
      background: #fff;
    }

    .el-tabs__item {
      border: 1px solid #eee;
      margin: 0;
      border-left: 0;
      background: #fafbfc;
      color: #000;
    }

    .el-tabs__item:first-child {
      margin-left: 20px;
      border-left: 1px solid #eee;
    }

    .is-active {
      border-bottom: 0 !important;
      background: #fff;
      color: #307eff;
    }
  }

  .anjian label {
    padding: 0 !important;
    width: 100px !important;
  }

  .queryForm .el-checkbox {
    margin-right: 10px !important;
    width: auto !important;
  }

  .iszgfc .el-form-item__content {
    width: 120px;
  }
}

// 标题样式（原逻辑保留）
.titleBox {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dfe4ed;
  margin: 0 20px 20px 20px;
  position: relative;

  &::before {
    display: block;
    content: "";
    width: 3px;
    height: 16px;
    background: #307eff;
  }

  .title {
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 10px;
    font-weight: 500;
  }

  .more {
    font-size: 16px;
    color: #999;
    cursor: pointer;
  }
}
</style>
